<template>
	<view class="content">
		<up-search v-model="keyword" placeholder="旅游景点" bg-color="#e3e3e3"></up-search>
		<view class="swiper-container">
		  <up-swiper v-if="bannerList.length" :list="bannerList" keyName="image" showTitle circular radius="8" :autoplay="true" height="160" />
		</view>
		<up-notice-bar :text="text1" mode="closable"></up-notice-bar>
		<view class="list">
			<up-waterfall v-model="flowList" ref="uWaterfallRef">
				<template v-slot:left="{leftList}">
						<view class="warter" v-for="(item, index) in leftList" :key="index" @click="goDetail(item)">
							<up-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="index"></up-lazy-load>
							<view class="title">
								{{ item.title }}
							</view>
							<view class="times">
								{{ item.times }}
							</view>
							<view class="tag">
								<view class="tag-one">
									{{ item.tag[0] }}
								</view>
								<view class="tag-two">
									{{ item.tag[1] }}
								</view>
							</view>
							<view class="isDot" v-if="item.isDot">
								{{ item.isDot }}
							</view>
						</view>
					</template>
					<template v-slot:right="{rightList}">
						<view class="warter" v-for="(item, index) in rightList" :key="index" @click="goDetail(item)">
							<!-- 这里编写您的内容，item为您传递给v-model的数组元素 -->
							<up-lazy-load threshold="-450" border-radius="10" :image="item.img" :index="index"></up-lazy-load>
							<view class="title">
								{{ item.title }}
							</view>
							<view class="times">
								{{ item.times }}
							</view>
							<view class="tag">
								<view class="tag-one">
									{{ item.tag[0] }}
								</view>
								<view class="tag-two">
									{{ item.tag[1] }}
								</view>
							</view>
							<view class="isDot" v-if="item.isDot">
								{{ item.isDot }}
							</view>
						</view>
					</template>
			</up-waterfall>
		</view>
		<view v-if="showTopBtn" class="topClass" @click="Totop">
			<up-icon name="arrow-upward" color="#fff" size="28"></up-icon>
		</view>
	</view>
</template>

<script setup>
	import { getBanner, getHomeList } from '../../api/api.js'
	import { onLoad, onReachBottom, onPageScroll } from '@dcloudio/uni-app'
	import { ref, reactive } from 'vue';  

	const keyword = ref('');  
	// 轮播图数据
	const bannerList = ref([])
	const text1 = ref('这么近，那么美，周末到河北');
	// 瀑布流数据
	const flowList = ref([])
	// 返回顶部箭头是否显示
	const showTopBtn = ref(0)
	
	onLoad(() => {
		getBanner().then(res => {
			console.log(res)
			bannerList.value = res.bannerList
		})
		getHomeList().then(res => {
			console.log(res)
			flowList.value = res
		})
	})
	// 触底触发
	onReachBottom(() => {
		// 模拟触底后数据的加载
		setTimeout(() => {
			addRandomData()
		}, 1000)
	})
	
	// 滚动监听
	onPageScroll((e) => {
		if(e.scrollTop > 600) {
			showTopBtn.value = 1
		} else {
			showTopBtn.value = 0
		}
	})
	
	// 返回顶部函数
	const Totop = () => {
		// 回顶函数
		uni.pageScrollTo({
			scrollTop:0, // 目标位置
			duration:300 // 动画时间
		})
	}	
	// 模拟后端返回的数据
	const addRandomData = () => {
		for(let i = 0; i < 10; i++) {
			let index = uni.$u.random(0, flowList.value.length - 1)
			// 深拷贝选中元素	避免直接引用原对象导致修改污
			let item = JSON.parse(JSON.stringify(flowList.value[index]))
			// let item = structuredClone(flowList.value[index])
			item.id = uni.$u.guid()
			flowList.value.push(item)
		}
	}
	// 跳转景点详情页面
	const goDetail = (item) => {
		const can =JSON.stringify(item)
		uni.navigateTo({
			url: `/pages/detail/detail?item=${encodeURIComponent(can)}`
		})
	}
</script>
<style>
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss" scoped>
	.content {
		padding: 20rpx 20rpx;
	}
	
	.swiper-container {
		margin: 15rpx 0;
	}
	
	.list {
		margin: 10rpx 0;
		
		.warter {
			margin: 10rpx 10rpx 10rpx 0;
			background-color: #fff;
			border-radius: 16rpx;
			padding: 16rpx;
			position: relative;
			
			.title {
				font-size: 30rpx;
				margin-top: 10rpx;
				color: #303133;
			}
			
			.times {
				font-size: 24rpx;
				color: #777;
				margin-top: 10rpx;
			}
			
			.tag {
				display: flex;
				margin-top: 10rpx;
				
				.tag-one {
					border: 1px solid rgb(252, 163, 129);
					color: #ffaa00;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					padding: 4rpx 14rpx;
					border-radius: 50rpx;
				}
				
				.tag-two {
					border: 1px solid #00aaff;
					color: #00aaff;
					font-size: 20rpx;
					display: flex;
					align-items: center;
					padding: 4rpx 14rpx;
					border-radius: 50rpx;
					margin-left: 20rpx;
				}
			}
			
			.isDot {
				position: absolute;
				top: 20rpx;
				right: 20rpx;
				font-size: 20rpx;
				color: #fff;
				line-height: 32rpx;
				background-color: red;
				text-align: center;
				border-radius: 10rpx;
				padding: 4rpx 10rpx;
			}
		}
	}
	
	.topClass {
		position: fixed;
		bottom: 120rpx;
		right: 30rpx;
		background-color: rgb(0, 0, 0, 0.5);
		padding: 20rpx;
		border-radius: 50%;
		display: flex;
		justify-items: center;
		align-items: center;
	}
</style>
